<template>
   <footer class="footer">
      <span class="todo-count">剩余<strong>{{count}}</strong></span>
      <ul class="filters" @click="changeType">
        <li>
          <a :class="{selected:type==='all'}" href="#/" @click="type='all'">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:type==='active'}" @click="type='active'">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:type==='completed'}" @click="type='completed' ">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="isShow" @click="clearDone">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      required:true
    }
  },
  data() {
    return {
    type:'all'
    }
  },
 computed:{
  count(){
    return (this.list.filter(item=> !item.isDone)).length
  },
  isShow(){
    return this.list.some(item=>item.isDone)
  }
 },
 methods:{
  changeType(){
    this.$emit('changeType',this.type)
  },
  clearDone(){
    this.$emit('clearDone')
  }
 }
}
</script>